<script lang='ts' setup>
import Header from '@/components/manager/Header';
const router = useRoute()
const path = ref(router.path)
const matched = ref(router.matched)
const selectedKeys = ref([path.value])

watch(() => router.path, (newParams) => {
  path.value = newParams;

});

watch(() => router.matched, (newParams) => {

  matched.value = newParams;

});


</script>

<template>
  <a-layout>
    <!-- 顶部导航 -->
    <a-layout-header :style="{ position: 'fixed', zIndex: 10, width: '100%' }">
      <div flex="~ v-center" gap="5">
        <span text="5 #e5e7eb">小滴课堂</span>
        <a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="horizontal">
          <a-menu-item key="/">
            <RouterLink to="/">首页</RouterLink>
          </a-menu-item>
          <!-- 其他导航 -->
          <component :is="Header" />
        </a-menu>
      </div>

    </a-layout-header>

    <a-layout-content m="t-16!" p="x-12!">
      <!-- 面包屑 -->
      <a-breadcrumb m="y-16px!">
        <a-breadcrumb-item>
          <RouterLink to="/">首页</RouterLink>
        </a-breadcrumb-item>
        <a-breadcrumb-item v-for="item in matched" :key="item.name">
          <RouterLink :to="item.path !== '/manager' && item.path !== '/manager/product' ? item.path : '#'">{{ item.name
            }}
          </RouterLink>
        </a-breadcrumb-item>
      </a-breadcrumb>
      <!-- 模块内容 -->
      <div bg="" :style="{zIndex:1,width: '100%'}">
        <RouterView />
      </div>
      
    </a-layout-content>
  </a-layout>
</template>